<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .checkBox{height:20px;cursor: pointer;display: inline-block;}
        .box{position: relative;width:20px;height:15px;display: inline-block;}
        .checkBox span{position: absolute;width:10px;height:20px;background: #ccc;border-radius: 5px 5px 0px 0px;}
        .checkBox span:nth-child(1){transform: rotate(-45deg);}
        .checkBox span:nth-child(2){transform: translateX(7px) rotate(45deg);}
    </style>
</head>
<body>
    <div class="app">
        <input type="text" v-model="msg" @keydown.enter="add">
        <input type="button" value="搜索" @click="search">
        <br>
        <Check-Box
            title="全选"
        ></Check-Box>
        <ul>
            <Item
                v-for="item in list"
                :is-Change="item.isChange"
                :title="item.title"
                :id="item.id"
                @set="onSet"
            >
                <template #left>
                    <Check-Box
                        :checked="item.flag"
                        :id="item.id"
                        @change="changeFlag"
                    ></Check-Box>
                </template>
                <template #right>
                    <input type="button" value="删除" @click="del(item.id)">
                </template>
            </Item>
        </ul>


        <list>
            <item>
                
            </item>
            <item></item>
            <item></item>
            <item></item>
        </list>
    </div>
</body>
<script src="../vue.global.js"></script>
<script src="./components/CheckBox.js"></script>
<script src="./components/Item.js"></script>
<script>

    Vue.createApp({
        data(){
            return {
                msg:"",
                list:[{
                    id: 1,
                    title: "今天要学习组合式API",
                    flag: true,
                    isChange: false
                }],
                num: 1
            }
        },
        methods:{
            add(){
                if(this.msg === "") return ;
                this.num++;
                this.list.push({
                    id: this.num,
                    title: this.msg,
                    flag: false,
                    isChange: false
                })
                this.msg = "";
            },
            search(){},
            del(id){},
            changeFlag(){},
            onSet(id, v){
                // console.log(id, v);
                let i = 0;
                const f = this.list.some((val,idx)=>{
                    i = idx;
                    return val.id === id
                })
                if(f){
                    this.list[i].title = v;
                }

                console.log(this.list);
            }
        },
        components:{
            CheckBox, Item
        }
    }).mount(".app")


    
</script>
</html>